<script setup lang="ts">
import { reactive, computed, nextTick } from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { useRoute, useRouter } from "vue-router";
import { login } from '../stores/api/login'
import { message } from 'ant-design-vue';
import { useWebSocket } from '../stores/websocket'
import { wsUrl } from '../utils/config'
interface FormState {
  username: string;
  password: string;
  remember: boolean;
}
const formState = reactive<FormState>({
  username: '',
  password: '',
  remember: true,
});
const router = useRouter()
const {
  status,
  reconnectCount,
  receivedMessages,
  init,
  connect,
  disconnect,
  send,
  clearMessages
} = useWebSocket()
const onFinish = (values: any) => {
    console.log('Success:', values);
    let obj =  {
       "account":values.username,
       "password":values.password
    }
    login(obj, 'post').then((res: any) => {
        console.log(res)
        if (res.code == 200) {
            localStorage.token = res.data.token
            nextTick(() => {
                init({
                    url: `${wsUrl}?token=${res.data.token}&types=T`, // 替换为实际的WebSocket服务地址
                    reconnectDelay: 2000,
                    maxReconnectCount: 10,
                    pingInterval: 30000,
                    pingMessage: { type: 'ping', payload: '' }
                })
                connect();
            })
            router.push('/home')
        } else {
            message.error(res.message);
        }
    }).catch((err: any) => {
        console.log(err)
    })
};

const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);

};
const disabled = computed(() => {
  return !(formState.username && formState.password);
});
</script>

<template>
     <div class="container login">
        <a-form
            :model="formState"
            name="normal_login"
            class="login-form"
            @finish="onFinish"
            @finishFailed="onFinishFailed"
        >
            <div class="title">学钱班教师端登录</div>
            <a-form-item 
                label="账 户"
                name="username"
                :rules="[{ required: true, message: '请输入账户' }]"
            >
                <a-input v-model:value="formState.username">
                    <template #prefix>
                    <UserOutlined class="site-form-item-icon" />
                    </template>
                </a-input>
            </a-form-item>

            <a-form-item
                label="密  码"
                name="password"
                :rules="[{ required: true, message: '请输入密码' }]"
            >
                <a-input-password v-model:value="formState.password">
                    <template #prefix>
                    <LockOutlined class="site-form-item-icon" />
                    </template>
                </a-input-password>
            </a-form-item>

            <!-- <a-form-item> -->
            <!-- <a-form-item name="remember" no-style>
                <a-checkbox v-model:checked="formState.remember">记住密码</a-checkbox>
            </a-form-item> -->
            <!-- <a class="login-form-forgot" href="">Forgot password</a> -->
            <!-- </a-form-item> -->

            <a-form-item>
            <a-button :disabled="disabled" type="primary" html-type="submit" class="login-form-button">
                登 录
            </a-button>
            </a-form-item>
        </a-form>
     </div>
</template>

<style scoped>
.login{
    position: relative;
    height: 100vh;
    background: #fff;
}
.title{
    text-align: center;
    line-height: 40px;
    color: #fff;
    line-height: 40px;
    margin-bottom: 10px;
    margin-left: 25px;
    font-size: 18px;
}
.login-form{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 300px;
    box-shadow: 0px 1px 34px rgba(0, 0, 0, 0.2);
    padding: 40px;
    border-radius: 10px;
    background-color: #4096ff;
}
.login-form-forgot {
  float: right;
}
.login-form-button {
  width: 100%;
  color: #fff
}

</style>